<template>
		 <!-- <view  v-if="show"   class="dramaBoxAll">
			<view class="isMask"></view>
			<image class="isVideo" mode="aspectFill"
				:style="{ height: currentVideo['inducedCoverImgUrl']? calHeight : 'calc(100vh - 132rpx - env(safe-area-inset-bottom))' }"
				style="position: relative;z-index: 55;width: 100vw;"
				:src="currentVideo['inducedCoverImgUrl'] || currentVideo['coverImgUrl']">
			</image> -->
			<view v-if="show" class="dramaBox">
				<view class="folat">
					<image
					
					class="yingdao"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/video/shoushiyingdao.gif"
						mode="scaleToFill"
					/>
					 <cover-image
					 v-if="ksPiontIsclose"
					@click="isClose"
					class="isChoose"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/video/kspopup_detel.png"
						mode="scaleToFill"
					/>
				</view>
               
			    <view>
                    <follow-services showCloseButton='false' @follow='follow'></follow-services>
                </view>
			</view>
		<!-- </view> -->
	
</template>

<script>
import followServices from './followServices.vue';
export default {
  components: { followServices },
	name: 'foucsPopup',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		currentVideo: {
			type: Object,
			default: {}
		},
	    calHeight:{
			type:String,

		},
		ksPiontIsclose:{
			type:Boolean,
			default:true,
		}
	},
	data() {
		return {
			
		};
	},
	methods: {
		follow(index) {
			this.$emit('follow')
		},
		isClose(){
			if(this.ksPiontIsclose) this.$emit('isClose')
			
		},
	},
	onLoad() {
	},
	onReady() {
	 
	}
};
</script>

<style lang="scss">
	@import '@/common/oneClass.css';  
	.dramaBoxAll {
		.isVideo {
			width: 100vw;
			height: calc(100vh - 132rpx - env(safe-area-inset-bottom));
		}
		.isMask {
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 101;
			width: 100vw;
			height: 100vh;
			// background-color: #00000050;
		}
		position: fixed;
		z-index: 100;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
			
		
		
	}
	 .dramaBox {
			
			position: fixed;
			z-index: 102;
			color: black;
			overflow: hidden;
			bottom: 130rpx;
			left: 30rpx;
			height: 400rpx;
			width: calc(100% - 60rpx);
			.folat{
				float: right;
				display: flex;
				align-items: flex-end;
				.yingdao{
					width: 160rpx;
					height: 200rpx;
				}
				.isChoose {
					height: 33rpx;
					width: 33rpx;
					margin-bottom: 20rpx;
					z-index: 1000;
				}
			}
			
		
		}


</style>
